.calendar-env {
  position: relative;
  margin-bottom: @default-padding;
  &:extend(.clearfix all);

  .calendar-sidebar {

    form {
      margin-bottom: @base-margin;

      .form-control {
        padding: @default-padding/2 + 5 @default-padding/2;
        height: @input-height-base + 5;
        width: 100%;
      }
    }

    @media screen and (max-width: @screen-sm-min) {
      margin-top: @default-padding;

      form {
        margin-bottom: 0;
      }
    }

    .calendar-list {
      margin: 0;
      margin-bottom: @default-padding;

      @media screen and (max-width: @screen-sm) {
        margin-top: @base-padding;
      }


      li {

        a {
          display: block;
          color: @main-text-color;
          padding-bottom: @base-padding - 3;

          &:hover {
            color: darken(@main-text-color, 15%);
          }

          .badge {
            margin-top: 0px;
            display: block;
            text-align: left;
            font-size: @font-size-small;
            padding: @base-padding - 3 @base-padding;
            .text-overflow();
          }
        }

        &.list-header {
          font-size: @font-size-small - 2;
          padding: @base-padding 0;
          font-weight: bold;
          color: @main-text-color;
          border-bottom: 0;
          .upper;
        }

        &.ui-draggable-dragging {

          .badge {
            .opacity(.6);
          }
        }

        &.ui-draggable-handle {

          .badge {
            cursor: move;
          }
        }
      }
    }
  }

  .calendar-main {
    @default-border-color: #eee;

    position: relative;
    background: #fff;
    padding: @default-padding;
    z-index: 5;

    // Full Calendar
    .fc {

      .fc-popover, .fc-row, hr, tbody, td, th, thead {
        border-color: @default-border-color;
      }

      .fc-toolbar {
        padding-bottom: @default-padding/2;

        .right-border() {
          @dist: 25%;

          content: '';
          display: block;
          position: absolute;
          right: -1px;
          top: @dist;
          bottom: @dist;
          width: 1px;
          background: @default-border-color;
        }

        .fc-left {

          h2 {
            font-size: @font-size-h3 + 1;

            &:before {
              content: '\f133';
              font-family: 'fontawesome';
              display: inline-block;
              margin-right: @base-padding;
            }
          }
        }

        .fc-right {
          margin-top: 5px;

          > .fc-button-group:last-child {
            margin-right: -@default-padding/2;
          }
        }

        @media screen and (max-width: @screen-sm-min) {

          .fc-left, .fc-right {
            float: none;
            width: 100%;
            .clearfix;
          }

          .fc-left {

            h2 {
              text-align: center;
              width: 100%;
              float: none;
            }
          }

          .fc-right {
            position: relative;
            margin-top: @base-padding;
            text-align: center;
            top: @base-padding + 2;

            .fc-button-group {
              display: inline-block;
              float: none;
            }
          }
        }

        .fc-button-group {
          background: none;
          border: 0;

          .fc-month-button,
          .fc-basicWeek-button,
          .fc-agendaWeek-button,
          .fc-agendaDay-button,
          .fc-basicDay-button {

            &.fc-state-active {
              color: @text-color;
            }
          }

          .fc-month-button {

            &:after {
              .right-border();
            }

            + .fc-agendaWeek-button {

              &:after {
                .right-border();
              }

              + .fc-agendaDay-button {
              }
            }

            + .fc-basicWeek-button {

              &:after {
                .right-border();
              }
            }
          }
        }

        .fc-button {
          border: 0;
          background: none;
          padding: 0 @base-padding;
          margin: 0;
          height: auto;
          position: relative;
          outline: none;
          color: @main-text-color;
          .box-shadow(none);

          .fc-icon {
            font-size: @font-size-base;
            font-family: 'fontawesome';
          }

          &.fc-next-button,
          &.fc-prev-button {

            &:hover {
              color: @text-color;
            }
          }

          &.fc-prev-button {

            &:after {
              .right-border();
            }
          }
        }
      }

      .fc-view-container > .fc-basic-view > table {

        > thead > tr > td {

          &.fc-widget-header {
            border: 0;
            border-bottom: 1px solid @default-border-color;
          }

          .fc-day-header {
            border: 0;
            padding-bottom: @base-padding;
            color: darken(@main-text-color, 15%);
            font-weight: normal;
          }
        }

        > tbody > tr > .fc-widget-content {
          border: 0;
          border-bottom: 1px solid @default-border-color;

          .fc-day-number {
            padding-top: @base-padding;
            padding-right: @base-padding;
            color: #949494;
          }
        }
      }

      .fc-popover {
        .box-shadow(none);

        .fc-header {
          padding: @base-padding/2;
        }

        .fc-body {

          .fc-event-container {

            a {
              margin-left: 2px;
              margin-right: 2px;
            }
          }
        }
      }

      .fc-today {
        background-color: #fafafa;
        color: @brand-primary;
      }

      .fc-event {
        background: @secondary-color;
        border: 0;
        .border-radius(0);
        padding: 1px 3px;

        &.event-color-primary {
          background-color: @brand-primary;
        }

        &.event-color-success {
          background-color: @brand-success;
        }

        &.event-color-danger {
          background-color: @brand-danger;
        }

        &.event-color-warning {
          background-color: @brand-warning;
        }

        &.event-color-info {
          background-color: @brand-info;
        }

        &.event-color-red {
          background-color: @xe-red;
        }

        &.event-color-blue {
          background-color: @xe-blue;
        }

        &.event-color-purple {
          background-color: @xe-purple;
        }

        &.event-color-gray {
          background-color: darken(@xe-gray, 35%);
        }

        &.event-color-black {
          background-color: @xe-black;
        }
      }
    }
  }

  // Floating
  .calendar-right {
    float: right !important;

    @media screen and (max-width: @screen-sm-min) {
      float: none !important;
    }
  }

  .calendar-left {
    float: left !important;

    @media screen and (max-width: @screen-sm-min) {
      float: none !important;
    }
  }
}